<template>
    <div class="filter-container">
        <FilterList :filterData="filterData"></FilterList>
    </div>
    <div class="card">
        <el-form>
            <el-form-item prop="password">
                <el-input auto-complete="off" placeholder="订单号"></el-input>
            </el-form-item>

        </el-form>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const filterClick = (e: any) => {
    console.log(e.target);
    if (e.target.tagName.toLowerCase() === 'li') {
        let liList = e.target.parentNode.children
        for (let index = 0; index < liList.length; index++) {
            liList[index].classList.remove('active');
        }
        e.target.classList.add('active')
    }

}
const filterData = [
    {
        index: 1,
        label: '全部订单'
    },
    {
        index: 2,
        label: '待接单'
    },
    {
        index: 3,
        label: '待派送'
    },
    {
        index: 4,
        label: '派送中'
    },
    {
        index: 5,
        label: '已完成'
    },
    {
        index: 6,
        label: '已取消'
    },
]
</script>
<style scoped lang="scss">
.filter-container {
    ul {
        width: 700px;
    }
}
</style>